<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            window.onload=function(){
                var btn=document.getElementById("btn");//获取DOM对象
                var idol=document.getElementById("idol");//获取DOM对象
                var btn2=document.getElementById("btn2");//获取DOM对象
                var btn3=document.getElementById("btn3");//获取DOM对象
                var btn4=document.getElementById("btn4");//获取DOM对象
                var btn5=document.getElementById("btn5");//获取DOM对象
                var btn6=document.getElementById("btn6");//获取DOM对象

                btn.onclick=function(){
                    // select的DOM对象.options 返回当前Select对象中包含的Option对象数组
                    console.log(idol.options);//集合
                    console.log("options的数量:"+idol.options.length);
                    let options=idol.options;
                    for(let i=0;i<options.length;i++){
                        // console.log(options[i]);//option的DOM对象
                        console.log("value值:"+options[i].value);

                        // option的DOM对象.text 获取文本值
                        console.log("文本值:"+options[i].text);
                    }

                    // select的DOM对象.length
                    console.log("options的数量:"+idol.length)
                };

                btn2.onclick=function(){
                    // select的DOM对象.selectedIndex  返回被选中选项在Select对象中的索引号
                    // console.log(idol.selectedIndex);

                    // idol.selectedIndex=1;//设置被选中

                    // option标签的DOM对象.selected=true
                    idol.options[1].selected=true;

                };

                btn3.onclick=function () {
                    // 创建option节点
                    var option=document.createElement("option");
                    //添加value值
                    option.value="liyundi";

                    //添加文本值
                    option.text="李云迪";

                    //将option添加到select中去
                    idol.appendChild(option);
                };
                btn4.onclick=function () {
                    // new Option("文本值","value值");
                    var option=new Option("郎朗","langlang");

                    // select的DOM对象.add(option);
                    idol.add(option);
                };
                btn5.onclick=function () {

                    // select的DOM对象.options[选中项的索引]=null
                    // 删除一个选项
                    // idol.options[idol.selectedIndex]=null;

                    // 删除一个选项
                    // select的DOM对象[选中项的索引]=null
                    idol[idol.selectedIndex]=null;
                };
                btn6.onclick=function () {

                    // select的DOM对象.length=0
                    idol.length=0;

                };
            };
        </script>
    </head>
    <body>
        <select  id="idol">
            <option value="0">请选择你喜欢的男明星</option>
            <option value="liyifeng">李易峰</option>
            <option value="wuyifan">吴亦凡</option>
            <option value="Pgone">Pgone</option>
        </select>
        <input type="button" value="获取option的数量" id="btn">
        <input type="button" value="获取被选中的索引" id="btn2">
        <input type="button" value="添加选项" id="btn3">
        <input type="button" value="添加选项" id="btn4">
        <input type="button" value="删除一个选项" id="btn5">
        <input type="button" value="清空所有选项" id="btn6">
    </body>
</html>